<script setup lang="ts">
import { Film } from '@element-plus/icons-vue'
import EZUIKit from 'ezuikit-js'

const props = defineProps<{
  player: EZUIKit.EZUIKitPlayer
}>()

onMounted(() => {
  updateActive()
})

// region TODO 激活状态
const isActive = shallowRef(false)

function updateActive () {
  isActive.value = ['mobileRec', 'pcRec'].includes(props.player.themeId)
}

// 切换回放状态
function toggleActive () {
  isActive.value ? checkLine() : checkRec()
}
function checkLine () {
  props.player.changePlayUrl({ type: 'live' })
  isActive.value = false
}
function checkRec () {
  props.player.changePlayUrl({ type: 'rec' })
  isActive.value = true
}
// endregion
</script>

<template>
  <div class="d-flex-center fs-20" style="width: 32px;aspect-ratio: 1;">
    <el-icon class="icon" title="回放" :class="{ 'is-active': isActive }" @click="toggleActive"><Film /></el-icon>
  </div>
</template>

<style scoped lang="scss">
.icon {
  color: white;
  &.is-active {
    color: #157EDF;
  }
}

</style>
